<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改</title>
</head>
<script>
    function insertNode(){
        var tbody = document.getElementById("tbody");
        var tr = document.createElement("tr");
        tr.innerHTML="<td>" +
            "<input  class=\"form-control\" placeholder=\"规格选项\">" +
            "</td><td>" +
            "<input  class=\"form-control\" placeholder=\"排序\">" +
            "</td><td>" +
            "<button onclick='deleteNode(this)' type=\"button\" class=\"btn btn-default\" title=\"删除\" ><i class=\"fa fa-trash-o\"></i> 删除</button>\n" +
            "</td>";
        tbody.appendChild(tr);
    }

    function deleteNode(c){
        var tr = c.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    }
</script>
<body>
<form id="updateFrom">
    <table class="table table-condensed"  cellspacing="0" cellpadding="0"  >
        <input type="hidden" name="id" id="id" th:value="${ts.id}">
        <tr>
            <td style="text-align: center;vertical-align: middle">规格名称</td>
            <td>
                <input type="text" name="specName" id="specName" th:value="${ts.specName}">
            </td>
        </tr>
        <tr>
            <td style="text-align: center;vertical-align: middle">
                <input type="button" value="新建规格选项" onclick="insertNode()">
            </td>
            <td>
            </td>
        </tr>
        <table class="table table-bordered table-striped table-hover dataTable" id="tab">
            <thead>
            <tr>
                <th style="text-align: center;vertical-align: middle">规格选项</th>
                <th style="text-align: center;vertical-align: middle">排序</th>
                <th style="text-align: center;vertical-align: middle">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr th:each="option,optionStat:${options}" >

                <td>
                    <input  class="form-control" placeholder="规格选项" name="optionName" th:value="${option.optionName}">
                </td>
                <td>
                    <input  class="form-control" placeholder="排序" name="orders" th:value="${option.orders}">
                </td>
                <td>
                    <button type="button" class="btn btn-default" title="删除" th:id="${optionStat.index}" onclick="deleteNode(this)"><i class="fa fa-trash-o"></i> 删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </table>
</form>
</body>
</html>